<template>
  <div class="page">
    <div class="article-list">
      <van-list finished-text="你今天学废了吗" v-model="loading" :finished="finished" @load="loadMore">
        <!-- 使用封装好的组件循环渲染 -->
        <ArticleItem
          v-for="item in articleList"
          :key="item.id"
          :avatar="item.avatar"
          :stem="item.stem"
          :creator="item.creator"
          :createdAt="item.createdAt"
          :content="item.content"
          :likeCount="item.likeCount"
          :views="item.views"
          :id="item.id"
        ></ArticleItem>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getOpinionList } from '@/api/article'
import ArticleItem from '@/components/ArticleItem.vue'

export default {
  name: 'MyCollection',
  components: {
    ArticleItem
  },
  data () {
    return {
      // List组件需要的变量
      loading: false,
      finished: false,
      current: 1,
      pageSize: 10,
      // 渲染数据
      articleList: []
    }
  },
  async created () {
    // 可以在这里做初始化工作
  },
  methods: {
    // 加载更多数据
    async loadMore () {
      const res = await getOpinionList({
        optType: 1, // 1表示点赞列表
        pageSize: this.pageSize,
        page: this.current++
      })
      // 追加数据
      this.articleList.push(...res.data.rows)
      // 将loading改为false
      this.loading = false
      if (this.current > res.data.pageTotal) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  min-height: 100vh;
  background: #f5f5f5;
}

.article-list {
  padding: 1rem;
}
</style>
